<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layuiAdmin 内容系统-分类管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/resouces/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/resouces/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <button class="layui-btn layuiadmin-btn-tags" data-type="add">添加</button>
        </div>
        <div class="layui-card-body">
            <table id="LAY-app-content-tags" lay-filter="LAY-app-content-tags"></table>
            <script type="text/html" id="layuiadmin-app-cont-tagsbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                        class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<script src="/static/resouces/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).use(['table'], function () {
        var table = layui.table,
            $ = layui.$;

        //渲染列表
        var tableIns = table.render({
            elem: '#LAY-app-content-tags',
            url: "/video/type",
            // ,parseData: function(res){
            //   return res.data;
            // },
            cols: [[
                {type: 'numbers', fixed: 'left'},
                {field: 'id', width: 100, title: 'ID', sort: true},
                {field: 'classify', width: 100, title: '分类', minWidth: 50},
                {field: 'description', title: '描述', minWidth: 200},
                {title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#layuiadmin-app-cont-tagsbar'}
            ]],
            text: '加载异常'
        });

        //监听工具条
        table.on('tool(LAY-app-content-tags)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确定删除此分类？', function (index) {
                    //请求数据
                    $.ajax({
                        url: "/video/type/" + obj.data.id,
                        type: "DELETE",
                        success: function (res) {
                            console.log(res);
                        },
                        error: function (res) {
                            console.error(res);
                        }
                    });

                    //删除表项
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var tr = $(obj.tr);
                layer.open({
                    type: 2
                    , title: '编辑分类'
                    , content: 'tagsform.html?id=' + data.id
                    , area: ['450px', '250px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //获取iframe元素的值
                        var othis = layero.find('iframe').contents().find("#layuiadmin-app-form-tags"),
                            classify = othis.find('input[name="classify"]').val(),
                            description = othis.find('input[name="description"]').val();

                        //更新数据库
                        $.ajax({
                            url: "/video/type",
                            type: "PUT",
                            dataType: "json",
                            data: {
                                id: data.id,
                                classify: classify,
                                description: description
                            },
                            success: function (res) {
                                console.log(res);
                            },
                            error: function (res) {
                                console.error(res);
                            }
                        });

                        //更新列表
                        obj.update({
                            classify: classify,
                            description: description
                        });
                        layer.close(index);
                    }
                    , success: function (layero, index) {
                        //给iframe元素赋值
                        var othis = layero.find('iframe').contents().find("#layuiadmin-app-form-tags").click();
                        othis.find('input[name="classify"]').val(data.classify);
                        othis.find('input[name="description"]').val(data.description);
                    }
                });
            }
        });

        //监听按钮事件
        var active = {
            add: function () {
                layer.open({
                    type: 2
                    , title: '添加分类'
                    , content: 'tagsform.html'
                    , area: ['450px', '250px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        var othis = layero.find('iframe').contents().find("#layuiadmin-app-form-tags"),
                            classify = othis.find('input[name="classify"]').val(),
                            description = othis.find('input[name="description"]').val();

                        //请求数据
                        $.ajax({
                            url: "/video/type",
                            type: "POST",
                            dataType: "json",
                            data: {
                                classify: classify,
                                description: description
                            },
                            success: function (res) {
                                //console.log(res);
                                if (res.code == 0) {
                                    //重载数据列表
                                    tableIns.reload({
                                        url: '/video/type'
                                    });
                                    layer.msg("添加成功");
                                } else {
                                    layer.msg("添加失败");
                                }
                            },
                            error: function (res) {
                                console.error(res);
                            }
                        });

                        layer.close(index);
                    }
                });
            }
        }
        $('.layui-btn.layuiadmin-btn-tags').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : console.log("监听事件未注册");
        });
    });
</script>
</body>
</html>
